import React, { Component } from 'react'
import style from './Header.module.scss'
import classNames from 'classnames'
export default class Header extends Component {


  state = {
    tabs:[
      {text:'全部',type:0},
      {text:'未完成',type:1},
      {text:'已完成',type:2}
    ]
  }


  onKeyDown = (e) => {
    if(e.keyCode === 13) {
      this.props.onSubmit(e.target.value)
      console.log(e.target.value)
      e.target.value = ''
    }
  }



  render() {
    return (
      <div className={style.wrap}>
        <h3>{new Date().toLocaleDateString()}</h3>
        <div className={style.con}>
          <p>{this.props.total} tasks</p>
          <div className={style.finish}>
            {this.state.tabs.map(item => 
              <span
              key={item.type}
              className={classNames({[style.active]:this.props.curType === item.type})}
              onClick={() => this.props.onChangeType(item.type)}
              >{item.text}</span>
              )}
          </div>
        </div>
        <input type="text" className={style.input} placeholder='请输入待办事项' onKeyDown={this.onKeyDown}/>
      </div>
    )
  }
}

